<template>
	<view class="signin-content">
		<view class="signin-title">
			<view class="title-left">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" class="signin-image" mode=""></image>
				<view class="">
					<view class="integral">
						150
					</view>
					<view class="my-points">
						我的积分
						<u-icon name="question-circle"></u-icon>
					</view>
				</view>
			</view>
			<view class="title-right" @click="pointsBreakdown">
				<u-icon color="#fff" name="list"></u-icon>
				<text>积分明细</text>
			</view>
		</view>
		<view class="signin">
			<text>已累计签到3天</text>
			<button class="signin-button">已签到</button>
		</view>
		<view class="earn-points">
			<view class="points-title">
				赚积分
			</view>
			<u-line></u-line>
			<view class="title-contnet">
				<view class="daily-check-in">
					<image src="@/static/logo.png" class="content-image" mode=""></image>
					<view class="">每日签到</view>
				</view>
				<view class="">
					<button class="content-button">已完成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 跳转积分明细页面
			pointsBreakdown(){
				uni.navigateTo({
					url:'/pages/index/pointsBreakdown/pointsBreakdown'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.signin-content {
		background: linear-gradient(#F88519, white, white);
		padding: 30rpx 0rpx 0rpx 20rpx;
	}

	.signin-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title-left {
		display: flex;
		align-items: center;
	}

	.signin-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		margin-right: 20rpx;
	}

	.integral {
		font-weight: bold;
		font-size: 40rpx;
		color: #fff;
	}

	.my-points {
		display: flex;
		align-items: center;
	}
	
	.title-right{
		display: flex;
		align-items: center;
		background-color: #F9AA58;
		padding: 10rpx 10rpx 10rpx 10rpx;
		color: white;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
	}
	
	.signin{
		margin: 20rpx 20rpx 0rpx 20rpx;
		background-color: #fff;
		padding: 20rpx 0rpx 20rpx 20rpx;
		border-radius: 20rpx;
	}
	
	.signin-button{
		width: 400rpx;
		border-radius: 40rpx;
		background: #ccc;
		padding: 10rpx 0rpx 10rpx 0rpx;
		margin-top: 40rpx;
	}
	button::after {
		border: none;
	}
	
	button {
		padding-left: 20rpx;
		padding-right: 20rpx;
		text-align: center;
		line-height: 1.35;
		overflow: hidden;
		height: 100%;
	}
	
	.earn-points{
		padding: 20rpx 20rpx 20rpx 20rpx ;
		background-repeat: #fff;
	}
	
	.points-title{
		font-weight: bold;
		border-left: 4rpx solid red;
		padding: 0rpx 20rpx 0rpx 20rpx;
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}
	
	.title-contnet{
		display: flex;
		justify-content: space-between;
		font-size: 40rpx;
		align-content: center;
	}
	
	.daily-check-in{
		display: flex;
		align-items: center;
	}
	
	.content-image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}
	
	.content-button{
		padding: 10rpx 30rpx 10rpx 30rpx;
		color: #ccc;
		border-radius: 30rpx;
		margin-top: 20rpx;
		height: 70rpx;
	}
</style>